<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <!-- swiper-css -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <title>网页作品</title>
</head>

<body>
    <header>
        <div><img src="images/封面/背景文字.png" alt=""></div>
        <div class="zhuti">
            <ul>
                <li><img src="images/封面/主体圈圈.png" alt=""></li>
                <li><img src="images/封面/大标.png" alt=""></li>
                <li><img src="images/封面/NAME.饶小权TEL.15827385305拷贝5.png" alt=""></li>
                <li><img src="images/封面/手指.png" alt=""></li>
                <li><img src="images/封面/右手指.png" alt=""></li>
                <li><img src="images/封面/椭圆1拷贝4.png" alt=""></li>
                <li><img src="images/封面/cube-立方体1.png" alt=""></li>
                <li><img src="images/封面/cube-立方体2.png" alt=""></li>
                <li><img src="images/封面/cube-立方体3.png" alt=""></li>
                <li><img src="images/封面/cube-立方体4.png" alt=""></li>
            </ul>
        </div>
    </header>
    <div class="content">
        <section class="intro">
            <div class="title1">
                <h2>作品简介</h2>
                <img src="images/作品01/INTRODUCTION拷贝.png" alt="">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="items">
                <div class="item">
                    <div class="pic">
                        <img src="images/作品01/code01.png" alt="">
                        <p>略懂前端页面的设计师</br>
                            Designers understanding code
                        </p>
                    </div>
                    <p>
                        关于我<br>
                        ABOUT ME
                    </p>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="images/作品01/code02.png" alt="">
                        <p>网页设计</br>
                            H5 DESIGN
                        </p>
                    </div>
                    <p>
                        网页运营设计<br>
                        WEB H5 DESIGN
                    </p>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="images/作品01/code02.png" alt="">
                        <p>品牌IP秀才</br>
                            全设计流程<br>
                            IP DESIGN
                        </p>
                    </div>
                    <p>
                        IP形象设计&融入<br>
                        VISUAL REDESIGN
                    </p>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="images/作品01/code04.png" alt="">
                        <p>平面·画册·爱好</br>
                            OTHER ARTWORKS
                        </p>
                    </div>
                    <p>
                        其他设计作品<br>
                        OTHER ARTWORKS
                    </p>
                </div>
            </div>

        </section>
        <section class="me">
            <div class="aboutme">
                <div class="leftme">
                    <div class="picme">
                        <p>PERSONAL</p>
                        <span>
                            <i></i>
                            <p>PROFILE</p>
                        </span>
                        <h4>邮箱/Email</h4>
                        <p class="email">158219313@qq.com</p>
                        <h4>电话/Phone</h4>
                        <p class="phone">15827385305</p>
                        <h4>
                            <i></i>
                            作品链接
                        </h4>
                        <p>**********</p>
                    </div>
                    <div class="photo">
                    </div>
                    <div class="chang"></div>
                </div>
                <div class="rightme">
                    <ul class="chang1">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="item1">
                        <div>
                            <div class="guanyu">
                                <img src="images/作品02/介绍图标.png" alt="">
                                <h2>关于我/About me</h2>
                            </div>
                            <h2>饶小权/Yizhou</h2>
                        </div>
                        <span class="dian">
                            <span></span>
                            <span></span>
                        </span>
                    </div>
                    <div class="item2">
                        <p>经验3年</p>
                        <p>地址:深圳五和</p>
                        <p>求职意向:网页/UI设计师</p>
                        <p>出生年月:1997.08</p>
                    </div>
                    <div class="item3">
                        <p>学历:全日制大专、自考本科</p>
                        <p>毕业于:武汉职业技术学院</p>
                    </div>
                    <ul class="chang2">
                        <li>
                            <p>网页设计</p>
                        </li>
                        <li>
                            <p>运营活动</p>
                        </li>
                        <li>
                            <p>代码编写</p>
                        </li>
                        <li>
                            <p>画册设计</p>
                        </li>
                    </ul>
                    <div class="item4">
                        <img src="images/作品02/微信图片_20210408153556.png" alt="">
                    </div>
                </div>
            </div>
            <div class="ability">
                <div class="ability1">
                    <img src="images/作品02/介绍图标.png" alt="">
                    <h2>技术能力/Technical ability </h2>
                </div>
                <div class="ability2">
                    <ul>
                        <li>
                            <h3>经验方面</h3>
                            <p>三年网页、平面设计经验。独立负责公司的品牌设计、运营设计、画册设计、海报设计。有大量的项目经验。</p>
                        </li>
                        <li>
                            <h3>代码能力</h3>
                            <p>熟悉前端基础知识：HTML、DOM、
                                CSS、JavaScript、jquery框架。可
                                以用CSS开发网页特效动画。</p>
                        </li>
                        <li>
                            <h3>特长方面</h3>
                            <p>业余时间钻研三维建模设计，配合建模技能可完成视觉类设计，学习能力强，喜欢阅读和思考</p>
                        </li>
                    </ul>
                </div>
                <div class="ability3">
                    <h3>常用软件</h3>
                    <ul>
                        <li>
                            <img src="images/作品02/Ps.png" alt="">
                            <p>Photoshop</p>
                        </li>
                        <li>
                            <img src="images/作品02/Ai.png" alt="">
                            <p>illustrator</p>
                        </li>
                        <li>
                            <img src="images/作品02/vscode.png" alt="">
                            <p>vscode</p>
                        </li>
                        <li>
                            <img src="images/作品02/c4d.png" alt="">
                            <p>C4D</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="works">
                <div class="works1">
                    <img src="images/作品02/介绍图标.png" alt="">
                    <h2>工作经验 / Work experience</h2>
                </div>
                <div class="works2">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="jingli">
                        <div class="time">
                            <img src="images/作品02/time.png" alt="">
                            <div class="company">
                                <div class="xiucai">
                                    <p>2018.06 ~ 2021.04</p>
                                    <span>
                                        <img src="images/作品02/椭圆3.png" alt="">
                                        <h3>深圳市秀才教育有限公司</h3>
                                    </span>
                                    <h4>网页设计师 / 广告项目组</h4>
                                    <p>1.主要负责公司官网设计与创意分析，
                                        营销落地页设计。负责视觉，动效等工作。</p>
                                    <p>2.配合项目部门，制作相关设计，海报设计，画册设计等等。</p>
                                    <p>3.优化设计规范与工作流程，负责官
                                        网与APP的维护与更新，广告详情页
                                        的代码编写。</p>
                                </div>
                                <div class="huaimei">
                                    <p>2017.06 ~ 2018.06</p>
                                    <span>
                                        <img src="images/作品02/椭圆3拷贝.png" alt="">
                                        <h3>广州市怀美医疗用品有限公司</h3>
                                    </span>
                                    <h4>淘宝 / 天猫设计师</h4>
                                    <p>1.负责店铺美工设计，产品详情页排版，设计和美化。</p>
                                    <p>2.能够挖掘产品卖点，良好的将卖点体现到图片设计当中。</p>
                                    <p>3.总结和分析同行的主图和详情页的优点，运用结合店铺当中。</p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="advertise">
            <div class="xiangqing">
                <div class="ad1">
                    <img src="images/作品03/技术能力.png" alt="">
                    <p>广告详情设计/advertising&nbsp;design</p>
                    <div></div>
                </div>
                <h3>PROJECT ADVERTISING</h3>
                <h4>秀才教育 详情设计思路</h4>
                <div class="ad2">
                    <div class="ad2a">
                        <img src="images/作品03/手机.png" alt="">
                        <div>
                            <h4>移动端详情</h4>
                            <h6>Mobile terminal design</h6>
                        </div>
                        <div></div>
                        <div>
                            <p>学历教育型</p>
                            <h6>1.0.0</h6>
                        </div>
                    </div>
                    <div class="ad2b">
                        <h4>2021</h4>
                        <h3>广告投放·设计</h3>
                        <p>web</p>
                        <div></div>
                        <p>一舟</p>
                    </div>
                    <div class="ad2c"></div>
                </div>
            </div>
        </section>
        <section class="pro">
            <div class="pro1">
                <ul>
                    <li>
                        1
                    </li>
                    <li>
                        <p>
                            <em style="font-size: 36px;
                            font-weight: 600;
                            color: #1653f0;">P</em>
                            roject<br>description
                        </p>
                    </li>
                    <li>
                        详情说明
                    </li>
                    <li>
                        <span>
                            <img src="images/作品03/矩形3.png" alt="">
                        </span>
                        <div>
                            <img src="images/作品03/图层10.png" alt="">
                            <p>引导页，是用户通过点击链接跳转或者通过搜索引擎到达某个站点。在此指的就
                                是我们的活动首页，它的目的是将游客转化为你的用户。最重要的是能够快速、明确的将信息清晰地传达给访问者。
                                用户留存的基础信息通过表单,传达到公司后台,销售人员将数据进行高效率转化。</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="pro2">
                <ul>
                    <li class="pro2up">
                        2
                    </li>
                    <li>
                        <p>
                            <em style="font-size: 36px;
                            font-weight: 600;
                            color: #1653f0;">P</em>
                            roduct<br>positioning
                        </p>
                    </li>
                    <li>
                        投放定位
                    </li>
                    <li>
                        <div class="pro2a">
                            <div class="touxiang">
                                <img src="images/作品03/头像.png" alt="">
                            </div>
                            <div>
                                <h3>目标客户</h3>
                                <p>目标人群主要是上班族，在校生，学历低，高中或中专学历。
                                    中小学在职教师 幼儿园教师；有志于参加公务员考试；准备
                                    留学 移民人群；考取各种资格证 受专业限制者。</p>
                            </div>

                        </div>
                        <div class="pro2b">
                            <h3>产品目标</h3>
                            <ul class="target">
                                <li>
                                    <img src="images/作品03/图层10.png" alt="">
                                    <p>带给用户更好的就业机会</p>
                                </li>
                                <li>
                                    <img src="images/作品03/图层10.png" alt="">
                                    <p>评定职称</p>
                                </li>
                                <li>
                                    <img src="images/作品03/图层10.png" alt="">
                                    <p>可以直接报考研究生</p>
                                </li>
                                <li>
                                    <img src="images/作品03/图层10.png" alt="">
                                    <p>积分入户等等</p>
                                </li>
                            </ul>
                        </div>
                        <span>
                            <img src="images/作品03/矩形3.png" alt="">
                        </span>
                    </li>
                </ul>
            </div>
            <div class="pro3">
                <ul>
                    <li class="pro2up">
                        3
                    </li>
                    <li>
                        <p>
                            <em style="font-size: 36px;
                            font-weight: 600;
                            color: #1653f0;">D</em>
                            esign<br>goal
                        </p>
                    </li>
                    <li>
                        设计目标
                    </li>
                    <li>
                        <div class="el">
                            <div class="el1">
                                <h3>高效</h3>
                                <p>Efficient</p>
                            </div>
                            <p>效率</p>
                            <p>沟通</p>
                        </div>
                        <div class="el">
                            <div class="el1">
                                <h3>精简</h3>
                                <p>Simple</p>
                            </div>
                            <p>有序</p>
                            <p>信息清晰</p>
                        </div>
                        <div class="el">
                            <div class="el1">
                                <h3>专业</h3>
                                <p>Profession</p>
                            </div>
                            <p>严谨</p>
                            <p>安全性</p>
                        </div>

                    </li>
                </ul>
            </div>
        </section>
        <section class="code">
            <div class="code1">
                <ul>
                    <li class="pro2up">
                        4
                    </li>
                    <li>
                        <p>
                            <em style="font-size: 36px;
                            font-weight: 600;
                            color: #1653f0;">W</em>
                            hat<br>Code
                        </p>
                    </li>
                    <li>
                        落地实现预估
                    </li>
                    <li>
                        <p>DESIGN</p>
                        <p>PORTFOLIO</p>
                        <p>WEBSITE</p>
                    </li>
                </ul>
            </div>
            <div class="code2">
                <p>整个广告详情，没有复杂功能，主要就一个表单
                    获客功能。所以网页就用一张单页自上而下展示
                    完整，顶部导航使用锚链接。<br><br>
                    投放的主要是手机端，代码上主要采取的是FlexBox和Grid布局结合着使用。
                </p>
                <div>
                    <img src="images/作品04/图层5.png" alt="">
                </div>
            </div>
            <div class="code3">
                <p>英文字体</p>
                <ul>
                    <li>
                        <h3>Oswald</h3>
                        <h4>Bold</h4>
                        <p>英文字体: 94kb</p>
                    </li>
                    <li>
                        <h2>ABCDEFGHIJKLMNOPQRST</h2>
                        <h3>1234567890</h3>
                        <p>英文字体使用了CSS的FontFace功能，直接调用服务器本地
                            字体，几乎不会对速度有影响。</p>
                    </li>
                </ul>
            </div>
            <div class="code4">
                <p>中文字体</p>
                <ul>
                    <li>
                        <h3>PingFang SC</h3>
                        <p>Regular/Medium/Bold</p>
                    </li>
                    <li>
                        <p>只要活着,就一定能找到好吃的</p>
                        <p>只要活着,就一定能找到好吃的</p>
                        <p>只要活着,就一定能找到好吃的</p>
                    </li>
                </ul>
            </div>
        </section>
        <section class="process">
            <div class="cess1">
                <ul>
                    <li class="pro2up">
                        5
                    </li>
                    <li>
                        <p>
                            <em style="font-size: 36px;
                            font-weight: 600;
                            color: #1653f0;">W</em>
                            ork<br>Process
                        </p>
                    </li>
                    <li>
                        工作过程
                    </li>
                </ul>
            </div>
            <div class="cess2">
                <h3>WORKING ATATUS</h3>
                <P>工作屏幕</P>
                <div>
                    <img src="images/作品04/图层9.png" alt="">
                </div>
            </div>
            <div class="cess3">
                <h3>A DRAFT PLAN</h3>
                <P>草稿规划</P>
                <div>
                    <img src="images/作品04/图层10.png" alt="">
                </div>
                <p>工作时总会把整体框架构思好,再将问题一步一步拆解,逐个解决</p>
                <p>(PS:这六亲不认的笔记,仅作参考吧^^)</p>
            </div>
        </section>
        <section class="yunying">
            <div class="yunying1">
                <div class="yy1">
                    <img src="images/作品05/技术能力.png" alt="">
                    <p>运营类设计 / Poster design for operation activities</p>
                    <div></div>
                </div>
                <img src="images/作品05/图层 9.png" alt="">
            </div>
            <div class="yunying2">
                <div class="smtitle">
                    <p>宣传海报设计</p>
                </div>
                <div class="lunbo1">
                    <div class="poster1">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="images/作品05/01.png" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="images/作品05/02.png" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="images/作品05/03.png" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="images/作品05/04.png" alt="">
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="silu">
                        <div class="shuxian"></div>
                        <h3>需求</h3>
                        <P>秀才教育对学员宣传海报，文案与插图结合2.5D轴测图风格。</P>
                        <h3>设计思路</h3>
                        <p>在插图设计的选择上。会更倾向于简洁商务的风格大部分色彩
                            的选择倾向于选择品牌色，否则很让人 感到杂乱无章。</p>
                    </div>
                </div>
            </div>
            <div class="yunying3">
                <div class="smtitle">
                    <p>节气海报设计</p>
                </div>
                <div class="poster2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="images/作品05/05.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/作品05/06.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/作品05/07.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/作品05/08.png" alt="">
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="yunying4">
                <div class="smtitle">
                    <p>活动海报设计</p>
                </div>
                <div class="poster3">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="images/作品05/09.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/作品05/10.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/作品05/11.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/作品05/12.png" alt="">
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>
        <section class="album">
            <div class="album1">
                <ul>
                    <li class="pro2up">
                        7
                    </li>
                    <li>
                        <p>
                            <em style="font-size: 36px;
                            font-weight: 600;
                            color: #1653f0;">A</em>
                            lbum<br>Design
                        </p>
                    </li>
                    <li>
                        画册设计
                    </li>
                </ul>
            </div>
            <div class="album2">
                <div class="uptitle">
                    <div class="lf">
                        <h2>万能黄金网格</h2>
                        <p>Super Grid</p>
                    </div>
                    <div class="right">
                        <p>DESIGN BASIS</p>
                        <p>理论依据</p>
                    </div>
                </div>
                <div class="alpic1">
                    <div>
                        <img src="images/作品06/图层7.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层8.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层9.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层10.png" alt="">
                    </div>
                </div>
                <p>出自:气韵设计理论</p>
                <div class="alpic2">
                    <div>
                        <img src="images/作品06/图层11.png" alt="">
                        <p>黄金比例分割（斐波那契数列）</p>
                    </div>
                    <div>
                        <img src="images/作品06/图层12.png" alt="">
                        <p>万能黄金网格（张子建）</p>
                    </div>
                </div>
                <div class="midtitle">
                    <div class="lf">
                        <h2>黄金网格介绍</h2>
                    </div>
                    <p>
                        设计中排版，黄金网格可以说是一个平面黑科技了，而这一套万能黄金网格的作者（张子建）就是一个平面大神。依据这一套理
                        论，只要遵循线的位置，都是接近黄金比例布局，变成网格的目的也就是可以更自由大篇幅去排版元素，网格可以做各种变形拉
                        伸，不会因为规则去限制设计,设计布局布线显得呆板僵硬。
                    </p>
                </div>
                <div class="alpic3">
                    <div>
                        <img src="images/作品06/图层13.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层14.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层15.png" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/图层16.png" alt="">
                    </div>
                </div>
                <div class="midtitle">
                    <div class="lf">
                        <h2>员工手册</h2>
                    </div>
                    <p>
                        排版主要依据黄金网格布局。员工手册是企业内部的人事制度管理规范，
                        同时又涵盖企业的各个方面，承载传播企业形象，企业文化功能。它是有效的员工
                        管理工具，员工的行动指南。"员工手册"是企业规章制度、企业文化与企业战略的浓缩，是企业内的"法律法规"，同时还起到了展示企业形象、传播企业文化的作用。 </p>
                </div>
                <div class="alpic4">
                    <div>
                        <img src="images/作品06/hua01.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua02.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua03.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua04.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua05.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua06.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua07.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua08.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua09.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua10.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/作品06/hua11.jpg" alt="">
                    </div>
                </div>
            </div>
        </section>

    </div>
    <script src="js/swiper-bundle.min.js"></script>
    <script>
        (function () {
            var swiper1 = new Swiper('.poster1', {
                slidesPerView: 3,
                spaceBetween: 30,
                centeredSlides: true,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        })();
        (function () {
            var swiper1 = new Swiper('.poster2', {
                slidesPerView: 3,
                spaceBetween: 3,
                centeredSlides: true,
                centeredSlidesBounds: true,
                centerInsufficientSlides: true,
                slidesOffsetBefore: 0,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        })();
        (function () {
            var swiper1 = new Swiper('.poster3', {
                slidesPerView: 3,
                spaceBetween: 3,
                centeredSlides: true,
                centeredSlidesBounds: true,
                centerInsufficientSlides: true,
                slidesOffsetBefore: 0,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        })();
     /*    (function () {
               var swiper1 = new Swiper('.poster4', {
                   slidesPerView: 3,
                   spaceBetween: 3,
                   centeredSlides: true,
                   centeredSlidesBounds: true,
                   centerInsufficientSlides: true,
                   slidesOffsetBefore: 0,
                   loop: true,
                   pagination: {
                       el: '.swiper-pagination',
                       clickable: true,
                   },
               });
           })(); */

    </script>
</body>

</html>